<template>
  <view>
    <PublicPage pageName="供货详情" class="qpp-supply-detail">
      <!-- list列表 -->
      <ScrollList
          ref="scrollView"
          isFixed
          noTop
          :scrollAnimation="false"
          @interrupt="interrupt"
          @scrolltolower="scrolltolower"
      >
        <template slot="content">
          <!-- 供货团长信息 -->
          <view class="userInfo">
            <image :src="groupUser.groupAvatar||'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" mode="aspectFill" class="avatar" @click.stop="_goHomepage"/>
            <view class="userContent">
              <view class="nickname" @click.stop="_goHomepage">{{groupUser.groupNickname||''}}</view>
              <view class="headRemarkContent">
                <text class="headRemark">备注：{{groupUser.groupRemark||''}}</text>
                <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/help-edit-icon.png" class="editIcon" @click.stop="_onOpenModal" />
              </view>
              <view class="sourceContent">来源：{{groupUser.source}}</view>
            </view>
            <view v-if="!isSelf" class="messageContent" @click.stop="_onChat">
              <view class="iconfont icon-comment_fill"></view>
            </view>
          </view>
          <!-- 帮卖数据 -->
          <view class="helpContent">
            <view class="helpItem flex-col justify-center">
              <view class="helpNum">{{groupUser.helpSellOrderAmount||0}}</view>
              <view class="itemText">帮卖金额(元)</view>
            </view>
            <view class="helpItem flex-col justify-center">
              <view class="helpNum">{{groupUser.helpSellOrderCount||0}}</view>
              <view class="itemText">帮卖订单数(单)</view>
            </view>
            <view class="helpItem flex-col justify-center">
              <view class="helpNum">{{groupUser.helpSellCommission||0}}</view>
              <view class="itemText">帮卖佣金(元)</view>
            </view>
            <view class="helpItem flex-col justify-center">
              <view class="helpNum">{{groupUser.beHelpSellDay||0}}</view>
              <view class="itemText">帮卖天数</view>
            </view>
          </view>
          <!-- 按钮组 -->
          <view class="groupButton">
            <view
                v-for="item in groupButtons"
                :key="item.value"
                class="buttonItem"
                @click.stop="_onGroupBtn(item.value)"
            >
              <image :src="item.image" class="image-icon" />
              <view class="label-txt">{{item.label}}</view>
            </view>
          </view>
          <!-- 可帮卖分割盒子 -->
          <!--  <view class="box">可帮卖的团</view> -->
          <!-- 选择tab -->
          <view class="u-tabs_box">
            <u-tabs
                :list="tabsList"
                :current="tabsCurrent"
                :is-scroll="false"
                :bold="false"
                bar-width="80"
                font-size="32"
                active-color="#E44435"
                inactive-color="#969799"
                @change="tabsChange"
            />
          </view>
          <!-- 搜索 -->
          <view id="search_id">
            <SearchInput
                :hasBorder="false"
                placeholder="输入搜索内容"
                @searchFn="_onSearch"
            />
          </view>
          <!-- 商品分类tabs -->
          <view v-if="tabsCurrent===1" class="ssp-tabs" :style="'top:'+tabsHeight+'px;'">
            <u-tabs
                :list="categories"
                :current="cateCurrent"
                :height="56"
                :show-bar="false"
                :active-item-style="activeItemStyle"
                :itemStyle="itemStyle"
                active-color="#FFFFFF"
                font-size="28"
                :bold="false"
                :gutter="24"
                inactive-color="#969799"
                @change="categoryChange"
            />
          </view>
          <view :style="{minHeight: listHeight+'px'}">
            <!-- 视频流--可帮卖的团 -->
            <DynamicCard
                v-if="(list.length||listLoading)&&tabsCurrent===0"
                :list="list"
                type="5"
                :loading="listLoading"
                @groupBtn="_dynamicGroupBtn"
            />
            <!-- 商品列表--可帮卖的商品 -->
            <GoodsWaterfall
                v-if="goodsList.length&&tabsCurrent==1"
                ref="waterfallRef"
                v-model="goodsList"
                type="2"
                @drawHS="_drawHS"
            />
            <view v-else-if="isEmpty" :style="{height:emptyHeight+'px'}">
              <DefaultPage :type="defaultType" :tips="defaultTip" />
            </view>
          </view>
        </template>
      </ScrollList>
      <!-- 缺省状态 -->
    </PublicPage>
    <!-- 编辑昵称弹框 -->
    <u-modal
          ref="uModal"
          v-model="dlModal"
          title="设置备注名"
          show-cancel-button
          async-close
          cancelColor="#969799"
          confirmColor="#E44435"
          @confirm="_onSubmitEdit"
      >
        <view class="slot-content">
          <view class="input_msg">
            <input
                v-model.trim="remarkName"
                maxlength="8"
                placeholder="请输入备注，最多8个字符。"
                class="input_box"
                placeholder-class="place_holder"
            />
          </view>
        </view>
    </u-modal>
    <!-- 解除帮卖关系 -->
    <u-popup v-model="cancelRelieve" mode="center" border-radius="14" length="85%">
      <view class="flex-col inventory-section_1">
        <text class="inventory-title">是否解除帮卖关系？</text>
        <text class="inventory-text u-m-b-24 fz-14 themeFontColor">解除帮卖关系后，你将不可再帮卖TA的团购，请谨慎操作</text>
      </view>
      <view class="flex-row inventory-button">
        <view class="flex-col inventory-text-wrapper" @click.stop="_onRelieve">
          <text class="viceColor">解除关系</text>
        </view>
        <view class="inventory-section_3"> </view>
        <view class="flex-col items-center inventory-text-wrapper_1" @click.stop="cancelRelieve = false">
          <text>我再想想</text>
        </view>
      </view>
    </u-popup>
    <!-- 不看TA的团购 -->
    <!-- <u-popup v-model="" mode="center" border-radius="14" length="85%">
        <view class="flex-col inventory-section_1">
          <text class="inventory-title">确认不看TA的帮卖团了吗？</text>
          <text class="inventory-text u-m-b-24 fz-14">确认后，TA的帮卖团不在出现在本页面。如需重新看到TA的帮卖团，可在供货团长详情页点击【显示TA的帮卖团】</text>
        </view>
        <view class="flex-row inventory-button">
          <view class="flex-col inventory-text-wrapper" @click.stop="">
            <text class="viceColor">确认不看</text>
          </view>
          <view class="inventory-section_3"> </view>
          <view class="flex-col items-center inventory-text-wrapper_1" @click.stop="">
            <text>我再想想</text>
          </view>
        </view>
      </u-popup> -->
    <!-- 开团成功、商品帮卖成功弹窗 -->
    <OpenGroupSharing ref="shareChild" @shareSuccess="_shareSuccess"/>
    <PublishPopup
        v-if="dlGroup"
        :sharePublishData="shareObject"
        @closeSharePublishFn="(flag)=>dlGroup=flag"
        @customInvite="_customInvite"
    />
    <!-- 动态分享、邀请帮卖 -->
    <SharePublicPage
        v-if="dlShare"
        :shareVideoData="shareObject"
        @cancelShareFn="(flag) => dlShare = false"
        @posterFn="_posterFn"
    />
    <!-- 保存相册海报分享 -->
    <SharePoster
        v-if="dlPoster"
        :shareVideoData="shareObject"
        @cancelSharePosterFn="() => dlPoster = false"
    />
    <!-- 点击立即邀请朋友参团之后弹框 -->
    <SharePopup v-if="dlInvite" :shareObject="shareObject" @close="dlInvite=false" @drawPoster="_drawPoster" />
    <!-- toast提示 -->
    <u-toast ref="uToast" />
    <!-- 已经帮卖弹窗 -->
    <SoldForHelpSell v-if="isSoldForHelpSellShow" @closeSoldForFn="closeSoldForFn" :soldForHelpSellId="soldForHelpSellId" />
    <!-- 邀请他人成别供货帮卖 -->
    <InviteOthersToHelpSell :show="isInviteOthersShow" :helpSellData="helpSellData" @closeInviteOthersFn="closeInviteOthersFn" @returnSharedDataFn="returnSharedDataFn" />
  </view>
</template>
<script>
import PublicPage from '@/components/publicPage/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import SearchInput from '@/components/searchInput/index.vue'
import DynamicCard from '@/components/dynamicCard/index.vue'
import GoodsWaterfall from '@/components/goodsWaterfall/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'
import OpenGroupSharing from "@/components/shareImage/openGroupSharing.vue"
import PublishPopup from '@/components/publishPopup/index.vue'
import SharePublicPage from '@/components/shareModal/sharePublicPage.vue'
import SharePoster from '@/components/shareModal/sharePoster.vue'
import shareMixin from '@/components/dynamicCard/shareMixin'
import SoldForHelpSell from '@/components/soldForHelpSell/index.vue'
import SharePopup from '@/pages/stream/components/sharePopup.vue'
//邀请他人成别供货帮卖
import InviteOthersToHelpSell from "@/components/inviteOthersToHelpSell/index.vue"

import supply from '@/api/supply'
import goodsApi from '@/api/goods.js'

import Util from '@/api/util.js'

const groupButtons = [
  {
    value: 1,
    label: '解除帮卖关系',
    image: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/cancle_help_icon.png'
  },
  {
    value: 2,
    label: '不看TA的团',
    image: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/not_read_icon.png'
  },
  {
    value: 3,
    label: '给TA推荐帮卖',
    image: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/recommend_help_icon.png'
  }
]
export default {
  name: 'supplyDetail',
  // 分享、海报相关在shareMixin中
  mixins: [shareMixin],
  components: {
    PublicPage,
    ScrollList,
    DynamicCard,
    GoodsWaterfall,
    SearchInput,
    DefaultPage,
    PublishPopup,
    OpenGroupSharing,
    SharePublicPage,
    SharePoster,
    SoldForHelpSell,
    InviteOthersToHelpSell,
    SharePopup
  },
  computed: {
    globalData () {
      return this.$store.state.globalData
    },
    // tabs中active样式
    activeItemStyle() {
      return {
        background: '#E44435',
        borderRadius: '44rpx'
      }
    },
    // tab item样式
    itemStyle() {
      return {
        background: '#F2F3F5',
        borderRadius: '44rpx',
        margin: '0 8rpx'
      }
    },
  },
  onLoad(options) {
    // 隐藏菜单胶囊的分享按钮
    wx.hideShareMenu({
      menus: ["shareAppMessage"]
    })
    this.routeData = options
    // 当前是否是用户自己
    if (this.$store.state.imUserInfo.imId === options.groupAccountId) {
      this.isSelf = true
    }
  },
  onShow() {
    this.getGroupUser(this.routeData.groupAccountId)
    this.getDynamics(this.routeData.groupAccountId)
  },
  onReady() {
    setTimeout(async () => {
      const tabsDoms = await this.getUNavbarHeight('.u-tabs_box')
      const searchDoms = await this.getUNavbarHeight('#search_id')
      // 滚动位置
      this.searchScroll = tabsDoms.top - tabsDoms.height
      if(this.globalData.model.indexOf('iPhone') === -1) {
        this.searchScroll = this.searchScroll + 14
      }
      this.tabsHeight = tabsDoms.height
      const { windowHeight, safeBottom } = this.globalData
      this.listHeight = windowHeight - safeBottom - searchDoms.height - searchDoms.top
      this.emptyHeight = this.listHeight
      if (this.emptyHeight < 200) this.emptyHeight = 200
      // console.log(tabsDoms)
      // console.log(searchDoms, 'searchDoms')
    }, 100)
    this.$refs.scrollView.loadFinish(3)
  },
  onHide() {
    // 清除定时器标识
    if (this.timeout) clearTimeout(this.timeout)
  },
  data() {
    return {
      // 路由携带参数--groupAccountId
      routeData: {},
      // 供货团长信息
      groupUser: {
        beHelpSellDay: 0, // 已成为帮卖天数
        exclusiveCommission: 0, // 已赚取的专属佣金
        exclusiveCommissionRatio: 0, // 专属佣金比例
        groupAccountId: '', // 供货团长id
        groupAvatar: '', // 供货团长头像url
        groupMobile: '', // 供货团长手机号码
        groupNickname: '', // 供货团长用户昵称
        groupRemark: '', // 帮卖团长对供货团长的备注
        helpSellCommission: 0, // 帮卖佣金
        helpSellOrderAmount: 0, // 帮卖金额
        helpSellOrderCount: 0, // 帮卖订单数
        recommendCommission: 0, // 推荐佣金--预留字段
        recommendCommissionRatio: 0, // 推荐佣金比例(佣金)--预留字段
        recommendCount: 0, // 推荐数量
        source: '', // [推荐人昵称]推荐
      },
      isSelf: false, // 当前是否是自己
      groupButtons: groupButtons, // 按钮组
      list: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        keyword: ''
      },
      listMore: true, // 当前列表是否还有更多
      listLoading: true, // 加载骨架图
      dlModal: false, // 修改用户昵称弹框变量
      remarkName: '', // 用户昵称
      cancelRelieve: false, // 解除帮卖关系弹窗变量
      timeout: null,
      isSoldForHelpSellShow: false, // 帮卖过了不可帮卖
      soldForHelpSellId: '', // 已经帮卖返回自己帮卖团的id
      helpSellData: {},  // 邀请帮卖邀请好友赚奖金数据
      isInviteOthersShow: false, // 邀请他人成别供货帮卖弹窗组件
      inviteOthersShareData: {}, // 分享数据
      tabsList: [{name: '可帮卖的团'}, {name: '可帮卖的商品'}],
      tabsCurrent: 0,
      tabsHeight: 40, // 可帮卖的团、可帮卖的商品的高度
      categories: [], // 可帮卖商品分类列表
      cateCurrent: 0, // 可帮卖商品分类激活下标
      goodsPage: { // 可帮卖商品参数
        currentPage: 1,
        pageSize: 20,
        categoryId: null,
        keyword: ''
      },
      goodsList: [], // 可帮卖商品列表
      isEmpty: false,
      listHeight: 0, // 列表的最小高度
      defaultType: 2, // 缺省页状态
      defaultTip: '暂时没有供货团哦～',
      emptyHeight: 0,
      searchScroll: 0, // 搜索框的在Y轴的位置
      dlInvite: false
    }
  },
  methods: {
    // 把绘制好的分享数据信息返回到页面上去分享
    returnSharedDataFn (data) {
      this.inviteOthersShareData = data
    },
    closeInviteOthersFn () {
      this.isInviteOthersShow = false
    },
    closeSoldForFn () {
      this.$store.commit('PUBLIC_UPDATE_DATA',null)
      this.isSoldForHelpSellShow = false
    },
    // 获取供货团长详情
    async getGroupUser(id) {
      const { data } = await supply.getGroupInfo({groupAccountId: id})
      this.groupUser = data
    },
    // 获取动态列表数据
    getDynamics(id) {
      const params = {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        groupAccountId: id
      }
      if (this.page.keyword) params.keyword = this.page.keyword
      supply.getList(params).then(res => {
        if (this.page.currentPage === 1) {
          this.list = res.data.records
        } else {
          this.list = this.list.concat(res.data.records)
        }
        if ((this.page.currentPage * this.page.pageSize) !== this.list.length) {
          // 无更多数据标识
          this.listMore = false
          if(this.page.currentPage === 1){this.$refs.scrollView.loadFinish(3)} // 无更多数据
        }
      })
      // 隐藏骨架图标识
      this.timeout = setTimeout(() => {
        this.listLoading = false
      }, 750)
    },
    // 按钮组
    _onGroupBtn(type) {
      switch (type) {
        case 1:
          this.cancelRelieve = true
          break
        case 2:
          this.$refs.uToast.show({
            title: '功能待开放',
            type: 'warning',
          })
          break
        case 3:
          if (this.groupUser.isOpenRecommendBonus==1) {
            this.helpSellData = this.groupUser
            this.isInviteOthersShow = true
          } else {
            uni.showToast({
              title: '供货暂未开启该功能',
              icon: 'none',
            })
          }
          break
      }
    },
    // 跳转IM聊天
    _onChat() {
      // 在展示已过滤当前供货团长是用户自己的情况了
      this.navigateTo({url: '/pagesB/message/messageDetails?id=' + this.routeData.groupAccountId})
    },
    // 弹出修改昵称对话框
    _onOpenModal() {
      const { groupRemark, groupNickname } = this.groupUser
      this.remarkName = groupRemark || groupNickname
      this.dlModal = true
    },
    // 提交昵称修改
    _onSubmitEdit() {
      if (!this.remarkName) {
        // 清除异步关闭的loading状态
        this.$refs.uModal.clearLoading()
        return uni.showToast({
          title: '请输入备注!',
          icon: 'none',
          duration: 1000
        })
      }

      supply.updateRemark({
        groupAccountId: this.routeData.groupAccountId,
        groupRemark: this.remarkName
      }).then(res => {
        if (this.groupUser.groupRemark) {
          this.groupUser.groupRemark = this.remarkName
        } else {
          this.groupUser.groupNickname = this.remarkName
        }
        this.dlModal = false
        this.remarkName = ''
      })
    },
    // 解除帮卖关系
    _onRelieve() {
      supply.relieve({
        groupAccountId: this.routeData.groupAccountId
      }).then(res => {
        this.setIsRefreshType(true)
        this.cancelRelieve = false
        // this.navigateTo({ url: `/pagesA/helpSellGroups/helpSell?type=1`})
        this.navigateBack({ delta: 1 })
      })
    },
    // 下拉刷新
    interrupt() {
      if (this.timeout) clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.listMore = true
        this.page.currentPage = 1
        this.getDynamics(this.routeData.groupAccountId)
        this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 500);
    },
    // 上拉加载更多
    scrolltolower() {
      ++this.page.currentPage
      this.getDynamics(this.routeData.groupAccountId)
      this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成
    },
    _goHomepage() {
      this.navigateTo({url: `/pagesB/personalCenter/homePage?accountId=${this.groupUser.groupAccountId}`})
    },
    async tabsChange(index) {
      const tabsDoms = await this.getUNavbarHeight('.u-tabs_box')
      const searchDoms = await this.getUNavbarHeight('#search_id')
      const { windowHeight, safeBottom, navHeight } = this.globalData
      this.listHeight = windowHeight - (tabsDoms.height + tabsDoms.top + safeBottom)
      this.emptyHeight = this.listHeight
      if (this.emptyHeight <= 200) this.emptyHeight = 200

      this.tabsCurrent = index
      this.listMore = true
      this.isEmpty = false
      if (index === 0) {
        this.defaultTip = '暂时没有供货团哦～'
        this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
        this.goodsPage.currentPage = 1
        this.getDynamics(this.routeData.groupAccountId)
      } else {
        this.defaultTip = '暂无可帮卖的商品～'
        this.getTabs()
        this.getGoodsList()
      }
      if (searchDoms.top <= navHeight) {
        this.$refs.scrollView.goToScroll(this.searchScroll)
      }
      this.$refs.scrollView&&this.$refs.scrollView.loadFinish(0, 0) // 有更多数据加载
    },
    // 获取分类列表
    async getTabs() {
      const { data } = await goodsApi.getGHCategory({ accountId: this.routeData.groupAccountId })
      const categories = data || []
      categories.unshift({ name: '全部', id: null })
      this.categories = categories
      setTimeout(async () => {
        const cateTabDoms = await this.getUNavbarHeight('.ssp-tabs')
        this.listHeight = this.listHeight - cateTabDoms.height
        this.emptyHeight = this.listHeight
        if (this.emptyHeight <= 200) this.emptyHeight = 200
      }, 50)
    },
    // 可帮卖商品分类切换
    categoryChange(index) {
      this.cateCurrent = index
      const item = this.categories[index]
      this.goodsPage.categoryId = item.id
      this.isEmpty = false
      this.listMore = true
      this.goodsPage.currentPage = 1
      this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
      setTimeout(async () => {
        const { windowHeight, safeBottom, navHeight } = this.globalData
        const cateTabDoms = await this.getUNavbarHeight('.ssp-tabs')
        this.listHeight = windowHeight - (safeBottom  + cateTabDoms.top + cateTabDoms.height)
        if (cateTabDoms.top <= (this.tabsHeight + navHeight)) {
          this.$refs.scrollView.goToScroll(this.searchScroll)
        }
        this.$refs.scrollView && this.$refs.scrollView.loadFinish(0)
        this.getGoodsList()
      }, 0)
    },
    // 获取商品列表--可帮卖的商品
    getGoodsList() {
      const params = {
        currentPage: this.goodsPage.currentPage,
        pageSize: this.goodsPage.pageSize,
        accountId: this.routeData.groupAccountId,
        type: 1
      }
      if (this.goodsPage.categoryId) params.categoryId = this.goodsPage.categoryId
      if (this.goodsPage.keyword) params.searchCriteria = this.goodsPage.keyword
      goodsApi.getGoodsSquare(params).then(res => {
        if (this.goodsPage.currentPage === 1) {
          this.goodsList = res.data.records
          if (!this.goodsList.length) this.isEmpty = true
        } else {
          this.goodsList = this.goodsList.concat(res.data.records)
        }
        // 无更多数据标识
        if ((this.goodsPage.currentPage * this.goodsPage.pageSize) !== this.goodsList.length) {
          this.listMore = false
          this.$refs.scrollView.loadFinish(3)
        }
      }).catch(() => {
        this.isEmpty = true
        this.$refs.scrollView.loadFinish(3)
      })
    },
    // 搜索框搜索
    _onSearch(val) {
      this.listMore = true
      this.isEmpty = false
      if (this.tabsCurrent === 0) {
        this.page.keyword = val
        this.page.currentPage = 1
        this.defaultType = 2
        this.defaultTip = '暂时没有供货团哦～'
        this.getDynamics(this.routeData.groupAccountId)
      } else {
        this.goodsPage.keyword = val
        this.goodsPage.currentPage = 1
        this.defaultType = 2
        this.defaultTip = '暂无可帮卖的商品～'
        this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
        this.getGoodsList()
      }

      if (val) {
        this.defaultType = 3
        this.defaultTip = '暂未搜索相关结果，换个关键词试试～'
      }
    },
    // 商品帮卖绘制海报
    _drawHS(item) {
      goodsApi.updateShopWindow({
        spuId: item.spuId,
        superiorShopWindowId: item.shopWindowId,
        commissionRatioLv2: this.$store.state.userInfo.subordinateHelpSellCommissionRatio,
        isShopWindow: 0
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({
            icon: 'none',
            title: '正在帮卖',
          })
          const canvasData = {
            isGoods: true,
            userAvatar: this.groupUser.groupAvatar || this.$store.state.userInfo.communityLogo,// 团长头像
            userNickname: this.groupUser.groupNickname || this.$store.state.userInfo.communityName,// 名字
            bgImgUrl: item.image,// 背景图片
            btnText: '跟团购买',
            salePrice: item.minSalePrice,
            type: 1, // 0动态 1开团成功,团购成功 2帮卖
            followGroupNumber: item.saleCount > 0 ? Util.playvolume(item.saleCount) + '人跟团中' : '一大波人赶来中'
          }
          // 海报参数
          this.shareObject = {
            communityLogo: canvasData.userAvatar,
            communityName: canvasData.userNickname,
            isGoods: true, // 是否是商品
            title: item.goodsName,
            shopWindowId: res.data,
            page: 'pagesB/goods/goodsDetails',
            isShareType: 1,
            thumbnail: item.image,
            minSalePrice: item.minSalePrice,
            maxSalePrice: item.maxSalePrice,
            marketPrice: item.marketPrice,
            totalBuyCount: item.saleCount,
            options: {
              shopWindowId: res.data,
              shareType: true
            }
          }

          this.$nextTick(() => {
            this.$refs.shareChild.shareFrends(canvasData)
            setTimeout(() => {
              item.isSelected = 1
            }, 500)
          })
        }
      })
    },
    // 点击立即邀请朋友参团
    _customInvite() {
      this.dlInvite = true
      this.dlGroup = false
    },
    _drawPoster() {
      this.dlInvite = false
      this.dlPoster = true
    },
  }
}
</script>
<style lang="scss" scoped>
.qpp-supply-detail {
  width: 100%;
  .userInfo {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 196rpx;
    padding: 24rpx 32rpx;
    border-top: 2rpx solid #EBEDF0;
    background-color: #ffffff;
    .avatar {
      display: block;
      width: 112rpx;
      height: 112rpx;
      border-radius: 50%;
    }
    .userContent {
      flex: 1;
      margin-left: 24rpx;
    }
    .nickname {
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 500;
      color: $n8Color;
      @include bov(1);
    }
    .headRemarkContent {
      display: flex;
      align-items: center;
      margin: 16rpx 0;
    }
    .headRemark {
      line-height: 40rpx;
      font-size: 28rpx;
      color: $n6Color;
      @include bov(1);
    }
    .editIcon {
      width: 28rpx;
      height: 28rpx;
      margin-left: 8rpx;
    }
    .sourceContent {
      font-size: 24rpx;
      line-height: 32rpx;
      color: $n6Color;
    }
    .icon-comment_fill {
      font-size: 40rpx;
      color: #C8C9CC;
    }
    .messageContent {
      width: 64rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
    }
  }
  .helpContent {
    display: flex;
    width: 100%;
    height: 160rpx;
    padding: 0 24rpx;
    background-color: #ffffff;
    .helpItem {
      width: 25%;
      height: 100%;
      text-align: center;
    }
    .helpNum {
      margin-bottom: 8rpx;
      line-height: 48rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: $n8Color;
    }
    .itemText {
      width: 100%;
      line-height: 32rpx;
      font-size: 24rpx;
      text-align: center;
      color: $n6Color;
    }
  }
  .groupButton {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 168rpx;
    padding: 0 24rpx;
    border-top: 4rpx solid #F7F8FA;
    background-color: #ffffff;
    .buttonItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 33.3333%;
    }
    .image-icon {
      width: 56rpx;
      height: 56rpx;
      margin-bottom: 16rpx;
    }
    .label-txt {
      font-size: 24rpx;
      line-height: 32rpx;
      color: $n8Color;
    }
  }
  .u-tabs_box {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 80;
    padding: 0 128rpx;
    background-color: #ffffff;
  }
  .ssp-tabs {
    position: sticky;
    left: 0;
    top: 200rpx;
    z-index: 79;
    height: 96rpx;
    padding: 18rpx 0 14rpx 24rpx;
    background-color: #ffffff;
  }
}
.relieve-text {
  color: $n6Color !important;
}
.inventory-text {
  color: $themeColor;
  font-size: 28rpx;
}
</style>